「他山之石，可以攻玉。」在開始設計自己公司的 Design System 之前，總要看看人家怎麼做？有什麼地方是我們可以學習的對吧？今天我們就來解析市場上很有名，很多人使用的設計系統：Ant Design。

Ant Design 是什麼？

Ant Design（簡稱 antd） 是阿里巴巴集團旗下的「螞蟻金服」（後來改名為螞蟻集團）所開發及維護的一套 UI Library、UI 框架，它提供了大量的組件庫（button、grid、navigation、pagination⋯⋯ ）讓前端團隊可以直接套用，不用從頭自己手刻（刻到天荒地老QQ）也可避免重複造輪子，更能確保 UI 的一致性，並提供某部份的改動權限，可以讓工程師根據專案需求再加工成自己想要的組件，大大減少開發時程及開發成本，這對沒有 Design System 的公司或前端團隊，是非常棒的開發體驗。

使用 Ant Design 的知識點：

前端有三大框架：React、Vue、Angular，Ant Design 是基於 React 的 UI Library（聽說 Vue、Angular 也可以用？），所以在使用前必須要先有 Node.js、React.js 的基礎，本篇並不是要跟大家來探討學習前端程式，而是要來解析 antd 的元件規劃，向巨人學習。

Ant Design 生態圈：

Ant Design 不只是一個 UI Library ，它也含概了動畫、動態產出圖表、多款組件包等等，甚至還封裝成了產品（Ant Design pro），生態圈有點廣，本篇僅針對它的設計及組件做重點解析。

Ant Design 主要介面說明：

1. 主要頁籤：包括設計、研發、組件、社群（博客）、資源、語系（中／英）等等。
2. 頁籤的選單：點選右上角的主要頁籤，左側就會顯示該頁籤的選單。（menu）
3. 選單內組件：組件內容，包括組件名稱、使用規範、code demo、注意事項等等。

色彩：

antd 將色彩分成了系統級與產品級

• 系統級：

1. 基礎色版：是antd的系統色系，主色12色，而每個顏色都有10個色階，所以總共為120色。
   
2. 中性色版：包含了黑、白、灰，從白到黑有13個色階。
   

• 產品級：

1. 品牌色：品牌主色是產品的主視覺，包含了品牌理念、CIS 識別等等，是很重要的色系。
2. 功能色：主要呈現各種狀態，例如：success、error、fail、link 等等狀態的代表顏色。
3. 中性色：這裡的中性色主要是運用在文字顏色上，例如：text-primary、text-secondary，還有在 Dark Mode 下的文字顏色定義。
4. UI 模式：針對不同的使用者習慣，antd 也設計出 dark mode 的色彩模式。
   

佈局：

• 基本佈局：分上下、左右兩大布局。
• 網格單位：以 8 為網格單位。
• 欄位佈局：以 24 欄為主，依不同螢幕裝置而有不同的佔欄數設計。
  

字體：

• 字體：andt 先以系統默認的字體為優先，當然它也有自己的一套字體庫，來確保不同平台不同系統的表現一致性。
• 字級：以 14px 為預設字級。
• 字距：定義了 10 個不同尺寸的字級以及相對應的行高。
• 字重：定義了400，500，600 三種字重。
  

按鈕：

• 按鈕類型：主按鈕、次按鈕、虛線按鈕、文本按鈕、連結按鈕。
• 按鈕 icon 位置：分別為按鈕前 icon （start）、按鈕後 icon （end）

• 按鈕尺寸：分「大、中、小」三種尺寸。
  

當然，在 antd 系統裡還有相當多的組件，例如：Icon、Typography、Flex、Layout、Space⋯⋯，對我們統整、設計 Design System 有極大的幫助，我們後面在正式進入設計時，會隨時參考學習其他的 antd 元件。有興趣的捧油們可以到官網做更深入的研究喔！

參考來源： https://ant.design/docs/spec/introduce-cn?tab=design